<template>
  <editable-wrapper>
    <a-form-item>
      <template #label>
        <a-input
          :value="label"
          class="max-w-20"
          @change="$emit('update:label', $event.target.value!)"
        ></a-input>
      </template>
      <slot></slot>
    </a-form-item>
  </editable-wrapper>
</template>

<script setup lang="ts" name="editable-input">
defineProps<{
  label: string
}>()

defineEmits<{
  (event: 'update:label', label: string): void
}>()
</script>

<style scoped></style>
